<template>
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" size="1000" @close="handleClose">
    <el-form :model="formData" ref="formRef" :rules="rules" label-position="right" label-width="80px" size="default"
      :scroll-to-error="true" :show-message="false">
      <el-form-item label="产品名称" required prop="name">
        <el-input v-model="formData.name" placeholder="请输入产品名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="产品类型" required prop="type">
        <el-select v-model="formData.type" placeholder="选择产品类型">
          <el-option label="车衣" value="车衣"></el-option>
          <el-option label="窗膜" value="窗膜"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="材质" prop="material">
        <el-input v-model="formData.material" placeholder="如：TPU/PVC等" clearable></el-input>
      </el-form-item>
      <el-form-item label="质保年限" prop="warranty_years">
        <el-input-number v-model="formData.warranty_years"></el-input-number>
      </el-form-item>
      <el-form-item label="产品图片" prop="image_url">
        <el-button type="primary" @click="openUpload" icon="Upload">上传图片</el-button>
        <div v-if="formData.image_url" class="img">
          <img :src="formData.image_url" width="80" height="80" />
        </div>
        <el-text>建议上传尺寸: 800x600px, 格式: JPG/PNG</el-text>
      </el-form-item>
      <el-form-item label="产品特性" prop="">
        <div class="tag-box">
          <el-tag v-for="tag in formData.features" :key="tag" closable :disable-transitions="false"
            @close="delTag(tag)">
            {{ tag }}
          </el-tag>
          <el-input v-if="inputVisible" ref="InputRef" v-model="tagVal" style="width: 100px;" size="small"
            @keyup.enter="confirmTag" @blur="confirmTag" />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">
            + 添加特性
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="覆盖部位" prop="">
        <div class="tag-box">
          <el-tag v-for="tag in formData.parts" :key="tag" closable :disable-transitions="false" @close="delPart(tag)">
            {{ tag }}
          </el-tag>
          <el-input v-if="partVisible" ref="PartRef" v-model="tagVal" style="width: 100px;" size="small"
            @keyup.enter="confirmPart" @blur="confirmPart" />
          <el-button v-else class="button-new-tag" size="small" @click="showPart">
            + 添加特性
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
    <Upload v-if="isupload" :isupload="isupload" type="image" @returnImgs="returnImgsFunc">上传图片</Upload>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, defineEmits, onMounted, inject, computed, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { addPriceApi, addProductApi, editPriceApi, editProductApi } from "@/api/carfilm/quote";
const dialogFormVisible = ref(false);
const formRef = ref<any>(null);
const isupload = ref(false);
const dialogTitle = ref("");
const formData = ref({
  id: 0,
  name: "",
  type: "",
  material: "",
  warranty_years: 0,
  image_url: "",
  features: [] as string[],
  parts: [] as string[],
});
const inputVisible = ref(false)
const partVisible = ref(false)
const tagVal = ref("");
const InputRef = ref<any>(null);
const PartRef = ref<any>(null);
const delTag = (tag: string) => {
  formData.value.features = formData.value.features.filter((e: string) => e !== tag);
};
const confirmTag = () => {
  if (tagVal.value) {
    formData.value.features.push(tagVal.value);
  }
  tagVal.value = "";
  inputVisible.value = false;
};
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
};
const delPart = (tag: string) => {
  formData.value.parts = formData.value.parts.filter((e: string) => e !== tag);
};
const confirmPart = () => {
  if (tagVal.value) {
    formData.value.parts.push(tagVal.value);
  }
  tagVal.value = "";
  partVisible.value = false;
};
const showPart = () => {
  partVisible.value = true
  nextTick(() => {
    PartRef.value!.input!.focus()
  })
};
const rules = reactive({
  name: [
    {
      required: true,
      message: "请输入产品名称",
    },
  ],
  type: [
    {
      required: true,
      message: "请选择产品类型",
    },
  ]
});
/*上传*/
const openUpload = (e: any) => {
  isupload.value = true;
};
/*获取图片*/
const returnImgsFunc = (e: any) => {
  if (e != null && e.length > 0) {
    formData.value.image_url = e[0].file_path;
  }
  isupload.value = false;
};
const emits = defineEmits(["getTable"]);
function addSave() {
  addProductApi(formData.value)
    .then((res) => {
      ElMessage.success("添加成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => { });
}
function editSave() {
  editProductApi(formData.value)
    .then((res) => {
      ElMessage.success("编辑成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => { });
}

function submitForm() {
  formRef.value.validate().then(() => {
    if (formData.value.id == 0) {
      addSave();
    } else {
      editSave();
    }
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (info?: any) => {
  dialogFormVisible.value = true;
  if (info?.id > 0) {
    dialogTitle.value = "编辑产品";
    formData.value = {
      id: info.id,
      name: info.name,
      type: info.type,
      material: info.material,
      warranty_years: info.warranty_years,
      image_url: info.image_url,
      features: info.features,
      parts: info.parts,
    };
  } else {
    dialogTitle.value = "添加产品";
  }
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    id: 0,
    name: "",
    type: "",
    material: "",
    warranty_years: 0,
    image_url: "",
    features: [] as string[],
    parts: [] as string[],
  };
  dialogFormVisible.value = false;
};

defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped>
.letter-box {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .letter-item {
    padding: 5px 10px;
    margin-top: 5px;
    cursor: pointer;
    margin-right: 5px;
    border: 1px solid #d9ecff;
    border-radius: 4px;

    &.active {
      background-color: #409eff;
      color: #fff;
    }
  }
}

.count-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.brand-item {
  margin-bottom: 35px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 24px;
  transition: all 0.3s;

  .brand-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;

    .brand-left {
      display: flex;
      align-items: center;

      .brand-name {
        margin: 0 15px 0 15px;
        font-size: 18px;
        font-weight: 500;
        color: #303133;
      }
    }
  }
}

.tag-box {
  display: flex;
  align-items: center;

  .el-tag {
    margin-right: 5px;
  }
}
</style>
